@extends('admin.layout._base')

@section('back_css')
    <link rel="stylesheet" href="{{ asset('/back/css/login.css') }}">
@stop

@section('body')
    <div class="container" v-cloak @keyup.enter="submitForm">
        <div class="login-wrapper">
            <div class="login-screen">
                <div class="well">
                    <div class="login-content">
                        <img class="profile-img-card" src="{{ asset('/back/img/avatar.png') }}" />
                        <p class="profile-name-card"></p>
                        <div class="login-form">
                            <div class="input-group">
                                <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
                                <input type="text" class="form-control" placeholder="用户名" v-model="formData.username"/>
                            </div>

                            <div class="input-group">
                                <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
                                <input type="password" class="form-control" placeholder="密码" v-model="formData.password"/>
                            </div>
                            <div class="input-group">
                                <div class="input-group-addon"><span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span></div>
                                <input type="text" class="form-control" placeholder="验证码" v-model="formData.captcha"/>
                                <span class="input-group-addon" style="padding:0;border:none;cursor:pointer;">
                                    <img src="{{ captcha_src() }}" width="100" height="30" onclick="this.src='{{ captcha_src() }}' + Math.random()"/>
                                </span>
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-primary btn-lg btn-block" @click="submitForm">登录</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('footer')
    <script type="text/javascript">
        var Vue_init = new Vue({
            el: ".container",
            data: {
                formData: {username: '', password: '', captcha: ''}
            },
            methods: {
                submitForm: function() {
                    this.$http.post('/admin/login', this.formData, {
                        emulateJSON:true,
                        'headers': {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    }).then(function(res){
                        layer.msg(res.body.message);
                        if(parseInt(res.body.code) === 200) {
                            window.location.reload();
                        } else if (parseInt(res.body.code) === 1003 || parseInt(res.body.code) === 1004) {
                            // 更换验证码
                            $('.login-form img').click();
                        }
                    }, function(res){
                        layer.msg(res.statusText);
                    });
                }
            }
        });
    </script>
@stop
